import axios from 'axios';
import "./css/index.css";
import "./css/common.css";
import "./js/axios.js";
import img1 from "./img/首页/scan.png"
import img2 from "./img/首页/thumb.png"

let slideShowData 
// 初始化轮播图
// 获取轮播图的内容部分
// let main = document.querySelector("main")
//记录图片
let indexPic = 0
let slideShowPic = document.querySelector(".slideShow-pic")
let slideShowDot = document.querySelector(".slideShow-dot")
let slideShowContent = document.querySelector(".slideShow-content")
let timer
axios({
  url: "http://119.91.237.19:7001/api/web/carouselGroup/get",
  method: "get",
  params: {
    projectId: 26,
    carouselGroupId: 21,
  },
})
  .then((res) => {
    // console.log(res);
    slideShowData = res.data.data.w_carousels
    // console.log(slideShowData);
    slideRender()
    slideInterval()
  })
  .catch((err) => {
    console.log(err);
  });


function slideRender() {
  // 获取数据将图片放入到对应区域
  slideShowData.forEach(function (item, index) {
  //渲染图片
  slideShowPic.innerHTML += `<li><img src=${item.url} alt="" /></li>`
  // 渲染小圆点(第一个给其dot-active类)
  if (index === 0) {
    slideShowDot.innerHTML += `<li class="dot-active" data-id="${index}"></li>`
  } else {
    slideShowDot.innerHTML += `<li data-id="${index}"></li>`
  }
})
} 


// 初始化热门航拍点
function hotDataFn() {
  axios({
    url: "http://119.91.237.19:7001/api/web/classify/getById",
    method: "get",
    params: {
      projectId: 26,
      id:57
    }
  }).then(res => {
    // console.log(res.data.data);
    let hotObj = res.data.data
    hotRender(hotObj)
  })
}
hotDataFn()
function hotRender(obj) {
  let hotTitleSpan = document.querySelector(".hot-title>span")
  hotTitleSpan.innerHTML = obj.name
  let hotData = obj.w_cases
  // console.log(hotData);
  let hotBlock = document.querySelector(".hot-block")
  let str = ''
  hotData.forEach(function (item) {
    str +=  `<li class="hot-introduction">
    <div class="hot-introction-pic"></div>
    <p>${item.name}</p>
    </li>`
  })
  hotBlock.innerHTML = str
  let hotBlockLis = hotBlock.querySelectorAll(".hot-introction-pic")
  hotBlockLis.forEach(function (item, index) {
    item.style.backgroundImage = `url(${hotData[index].cover})`
  })
}

// 新获取分类
axios({
  url: "http://119.91.237.19:7001/api/web/classify/getAll",
  method: "get",
  params: {
    projectId: 26,
  }
}).then(res => {
  let index = 0
  // console.log(res);
  let arr = res.data.data.rows.filter(function (item) {
    return item.name.slice(-1,item.name.length) === "副"
  })
  // console.log(arr);
  idToContent(arr, index)
})

// 根据id找数据
async function idToContent(arr, index = 0) {
  if (index >= arr.length) {
    return; // 结束递归
  }
  const num = arr[index];
  try {
    const res = await axios({
      url: "http://119.91.237.19:7001/api/web/classify/getById",
      method: "get",
      params: {
        id: num.id,
        projectId: 26
      }
    }).then(res => {
      // console.log(res);
      renderSecondary2(res)
    });
    // 递归调用下一次循环
    await idToContent(arr, index + 1);

  } catch (err) {
    console.log(err);
  }
}

function idToUser(arr) {
  axios({
    url: "http://119.91.237.19:7001/api/web/character/getAll",
    metehod: "get",
    params: {
      projectId:26
    }
  }).then(res => {
    console.log(res.data.data);
  })
}

async function renderSecondary2(obj) {
  // console.log(obj.data.data.w_cases);
  let userObj = await new Promise((resolve) => {
    resolve( axios({
      url: "http://119.91.237.19:7001/api/web/character/getAll",
      metehod: "get",
      params: {
        projectId:26
      }
    }))
  })
  obj.data.data.w_cases.forEach(item => {
    item["userName"] = userObj.data.data.filter(ele=> ele.id===item.characterId)[0].name
  })
  let secondaryBox = document.querySelector(".secondary-box")
  let itemTitle = obj.data.data
  secondaryBox.innerHTML += `<div class="secondary">
  <div class="secondary-content">
    <div class="secondary-title">
      <span>${itemTitle.name.slice(0,-2)}</span>
      <div class="more">
        <ul class="a${itemTitle.id}-dot dot-click">
        </ul>
        <a href="">更多&gt;</a>
      </div>
    </div>
    <ul  class="a${itemTitle.id}">
    </ul>
  </div>
</div>`
  // 数组
  // console.log(obj.data.data.w_cases);
  let itemContent = obj.data.data.w_cases
  let secondaryContentRender = document.querySelector(`.a${itemTitle.id}`)
  itemContent.forEach(function (item) {
    secondaryContentRender.innerHTML += `<li class="secondary-block">
        <img src="${item.cover}" alt="" />
        <p class="secondary-text-title">${item.name}</p>
        <p class="secondary-text-device">设备：<span>${item.sketch}</span></p>
        <div class="scan">
          <img src="${img1}" alt="" /><span>${0}</span>
        </div>
        <div class="thumb">
          <img src="${img2}" alt="" /><span>${1}</span>
        </div>
        <div class="secondary-user">
          <span><i></i>${item.userName}</span><span>${new Date(item.w_caseclassify.createdAt).toLocaleDateString()}</span>
        </div>
      </li>` 
  })
    // 获取数据长度
  let dotNum = itemContent.length
  // 获取每个块的长度
  let secondaryBlockWidth = document.querySelector(".secondary-block").offsetWidth
  // 获取区域的宽度
  let secondaryContentWidth = document.querySelector(`.a${itemTitle.id}`).offsetWidth
  let pageSize = Math.floor(secondaryContentWidth / secondaryBlockWidth)
  let pageNum = Math.ceil(dotNum / pageSize)
  let dotUl = document.querySelector(`.a${itemTitle.id}-dot`)
  for (let i = 0; i < pageNum; i++){
    if (i === 0) {
      dotUl.innerHTML += `<li class="dot-active" data-id="${i}"></li>`
    } else {
      dotUl.innerHTML += `<li data-id="${i}"></li>`
    }
  }
  secondarySlide()
}


function labDataFn() {
  axios({
    url: "http://119.91.237.19:7001/api/web/classify/getById",
    method: "get",
    params: {
      projectId: 26,
      id:58
    }
  }).then(res => {
    // console.log(res.data.data);
    renderLabelFn(res.data.data)
    labelSlideFn()
  })
}
labDataFn()
function renderLabelFn(obj) {
  let labelTitleSpan = document.querySelector(".label-title>span")
  labelTitleSpan.innerHTML = obj.name
  // let moreDotUl = document.querySelector(".lab-more>ul")
  let labDataArr = obj.w_cases
  let labdata = document.querySelector(".labData")
  let str = ''
  labDataArr.forEach(function (item) {
    str += `<li class="label-block">
    //   <img src="${item.cover}" alt="" />
    //   <p>${item.name}</p>
    // </li>`
  })
  labdata.innerHTML = str
  // 小圆点
  let labelDotClick = document.querySelector(".label-dot-click")
  // console.log(labelDotClick);
// 获取区域宽度的宽度
  let labDataWidth = document.querySelector(".labData").offsetWidth
// 获取块的宽度
  let labelBlockWidht = document.querySelector(".labData>li").offsetWidth
  let pageLabelSize = Math.floor( labDataWidth /labelBlockWidht)
  let pageLabelNum = Math.ceil(labDataArr.length / pageLabelSize)
  for (let i = 0; i < pageLabelNum; i++){
  if (i === 0) {
    labelDotClick.innerHTML += `<li class="dot-active" data-id="${i}"></li>`
  } else {
    labelDotClick.innerHTML += `<li data-id="${i}"></li>`
  }
  };
}
// 轮播图功能
function slideInterval() {
  let liWidth = document.querySelector(".slideShow-pic>li").offsetWidth
  function slideInterval() {
    slideShowPic = document.querySelector(".slideShow-pic")
    slideShowDot = document.querySelector(".slideShow-dot")
    slideShowContent = document.querySelector(".slideShow-content")
    // 获取所有小圆点
    let slideDots = document.querySelectorAll(".slideShow-dot>li")
    timer = setInterval(function () {
      // 移出当前的小圆点active
      slideDots[indexPic].classList.remove("dot-active")
      indexPic++
      if (indexPic >= slideShowData.length) {
        indexPic = 0
      }
      // 加完后给小圆点加上active
      slideDots[indexPic].classList.add("dot-active")
      slideShowPic.style.transform = `translate(-${indexPic * liWidth}px)`
      // console.log(slideShowDot);
    }, 5000)
  }
  slideInterval()
  // 鼠标悬浮事件
  slideShowContent.addEventListener("mouseenter", function () {
    clearInterval(timer)
  })
  slideShowContent.addEventListener("mouseleave", function () {
    clearInterval(timer)
    slideInterval()
  })
  // 事件委托给小圆点添加点击事件
  slideShowDot.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      let slideDots = document.querySelectorAll(".slideShow-dot>li")
      slideDots[indexPic].classList.remove("dot-active")
      indexPic = Number(e.target.dataset.id)
      slideDots[indexPic].classList.add("dot-active")
      slideShowPic.style.transform = `translate(-${indexPic * liWidth}px)`
    }
  });
}


// 次级内容的分页轮播
function secondarySlide() {
    let dotClicks = document.querySelectorAll(".dot-click")
  dotClicks.forEach(function (item) {
    let indexSecondaryPage = 0
    // 获取所有的小圆点
    let dots = item.querySelectorAll("li")
    item.addEventListener("click", function (e) {
      if (e.target.tagName === "LI") {
        dots[indexSecondaryPage].classList.remove("dot-active")
        indexSecondaryPage = Number(e.target.dataset.id)
        dots[indexSecondaryPage].classList.add("dot-active")
        let change = item.parentElement.parentElement.nextElementSibling
        let changeLis = change.querySelectorAll("li")
        let ulWidth = change.offsetWidth
        changeLis.forEach(function (item) {
          item.style.transform = `translate(-${indexSecondaryPage * ulWidth}px)`
        })
      }
    })
  })
}


// 标签内容的分页轮播
function labelSlideFn() {
  // 获取所有小圆点
  let labelDotClick = document.querySelector(".label-dot-click")
  let dotsLabel = labelDotClick.querySelectorAll("li")
  let indexLabelPage = 0
  let labDataWidth = document.querySelector(".labData").offsetWidth
  labelDotClick.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      dotsLabel[indexLabelPage].classList.remove("dot-active")
      e.target.classList.add("dot-active")
      indexLabelPage = Number(e.target.dataset.id)
      let labelBlocks = document.querySelectorAll(".label-block")
      labelBlocks.forEach(function (item) {
        item.style.transform = `translate(-${indexLabelPage * labDataWidth}px)`
      })
    }
  })
}


function lazyFn() {
  let io = new IntersectionObserver((entries) => {
    // console.log(entries);
  }, {
    root: document.querySelector('body') //将目标元素传递给root参数
  });
  io.observe(document.querySelector('main'));
}
lazyFn();